<template>
    <div class="iot-netty-mqtt">
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                <el-card>
                    <h3 style="font-weight: bold; margin-top: 0px">{{ $t('netty.mqtt.564432-0') }}</h3>
                    <el-row :gutter="20" class="panel-group">
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 17px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-orange">
                                    <svg-icon icon-class="guide" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div>
                                        <div class="card-panel-text">{{ $t('netty.mqtt.564432-1') }}</div>
                                        <count-to :start-val="0" :end-val="this.static['send_total']" :duration="3000" class="card-panel-num" />
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 18px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-green">
                                    <svg-icon icon-class="receiver" class-name="card-panel-icon" />
                                </div>

                                <div class="card-panel-description">
                                    <div>
                                        <div class="card-panel-text">{{ $t('netty.mqtt.564432-2') }}</div>
                                        <count-to :start-val="0" :end-val="this.static['receive_total']" :duration="3000" class="card-panel-num" />
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 17px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-orange">
                                    <svg-icon icon-class="authenticate" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div class="card-panel-text">{{ $t('netty.mqtt.564432-3') }}</div>
                                    <count-to :start-val="0" :end-val="this.static['auth_total']" :duration="1000" class="card-panel-num" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 18px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-green">
                                    <svg-icon icon-class="connect" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div class="card-panel-text">{{ $t('netty.mqtt.564432-4') }}</div>
                                    <count-to :start-val="0" :end-val="this.static['connect_total']" :duration="1000" class="card-panel-num" />
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 17px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-orange">
                                    <svg-icon icon-class="subscribe1" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div class="card-panel-text">{{ $t('netty.mqtt.564432-5') }}</div>
                                    <count-to :start-val="0" :end-val="this.static['subscribe_total']" :duration="2000" class="card-panel-num" />
                                </div>
                            </div>
                        </el-col>

                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 17px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-green">
                                    <svg-icon icon-class="message" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div>
                                        <div class="card-panel-text">{{ $t('netty.mqtt.564432-6') }}</div>
                                        <count-to :start-val="0" :end-val="this.static['today_received']" :duration="3000" class="card-panel-num" />
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="24" class="card-panel-col" style="margin-bottom: 17px">
                            <div class="card-panel">
                                <div class="card-panel-icon-wrapper icon-orange">
                                    <svg-icon icon-class="subscribe1" class-name="card-panel-icon" />
                                </div>
                                <div class="card-panel-description">
                                    <div class="card-panel-text">{{ $t('netty.mqtt.564432-7') }}</div>
                                    <count-to :start-val="0" :end-val="this.static['today_send']" :duration="2000" class="card-panel-num" />
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>

            <el-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
                <el-card style="margin-bottom: 19px">
                    <div ref="pieTotal" style="height: 291px"></div>
                </el-card>
                <el-card>
                    <div ref="statsChart" style="height: 354.5px"></div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { getNettyMqttStats, statisticNettyMqtt } from '@/api/iot/netty';
import CountTo from 'vue-count-to';

export default {
    name: 'Mqtt',
    components: {
        CountTo,
    },
    data() {
        return {
            // mqtt状态数据
            stats: {},
            // mqtt统计信息
            static: {},
        };
    },
    created() {
        this.getMqttStats();
        this.statisticMqtt();
    },
    methods: {
        /** 查询mqtt统计*/
        statisticMqtt() {
            statisticNettyMqtt().then((response) => {
                this.static = response.data;
                this.totalMqtt();
            });
        },
        /** 查询mqtt状态数据*/
        getMqttStats() {
            getNettyMqttStats().then((response) => {
                this.stats = response.data;
                this.drawStats();
            });
        },
        // 绘制mqtt饼图
        totalMqtt() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.pieTotal);
            var option;
            option = {
                title: {
                    text: this.$t('netty.mqtt.564432-8'),
                    left: 'left',
                    textStyle: {
                        fontSize: 18,
                        color: '#000',
                        fontWeight: 800,
                    },
                },
                tooltip: {
                    trigger: 'item',
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                },
                color: ['#b3f1fb', '#bdcafa'],
                series: [
                    {
                        name: this.$t('netty.mqtt.564432-9'),
                        type: 'pie',
                        radius: '55%',
                        label: {
                            show: true,
                        },
                        labelLine: {
                            normal: {
                                position: 'inner',
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: this.static['send_total'],
                                name: this.$t('netty.mqtt.564432-10'),
                            },
                            {
                                value: this.static['receive_total'],
                                name: this.$t('netty.mqtt.564432-11'),
                            },
                        ],
                    },
                ],
            };
            option && myChart.setOption(option);
        },
        /** 绘制mqtt状态统计 */
        drawStats() {
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(this.$refs.statsChart);
            var option;

            option = {
                title: {
                    text: this.$t('netty.mqtt.564432-12'),
                    textStyle: {
                        fontSize: 18,
                        color: '#000',
                        fontWeight: 800,
                    },
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                legend: {
                    data: [this.$t('netty.mqtt.564432-18'), this.$t('netty.mqtt.564432-19')],
                    right: '15',
                    icon: 'rect',
                    itemWidth: 10,
                    itemHeight: 10,
                    borderRadius: 20,
                    textStyle: {
                        color: 'rgba(0,0,0,0.65)',
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                },
                yAxis: {
                    type: 'category',
                    axisLabel: {
                        fontSize: 14,
                    },
                    data: [this.$t('netty.mqtt.564432-13'), this.$t('netty.mqtt.564432-14'), this.$t('netty.mqtt.564432-15'), this.$t('netty.mqtt.564432-16'), this.$t('netty.mqtt.564432-17')],
                },
                series: [
                    {
                        name: this.$t('netty.mqtt.564432-18'),
                        type: 'bar',
                        data: [this.stats['connection_count'], this.stats['session_count'], this.stats['subscription_count'], this.stats['retain_count'], this.stats['retain_count']],
                        itemStyle: {
                            color: '#0bb9ff',
                        },
                    },
                    {
                        name: this.$t('netty.mqtt.564432-19'),
                        type: 'bar',
                        data: [this.stats['connection_total'], this.stats['session_total'], this.stats['subscription_total'], this.stats['retain_total'], this.stats['retain_total']],
                        itemStyle: {
                            color: '#4a6ff8',
                        },
                    },
                ],
            };

            option && myChart.setOption(option);
        },
    },
};
</script>

<style lang="scss" scoped>
.panel-group {
    .card-panel-col {
        margin-bottom: 15px;
    }

    .card-panel {
        height: 78px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        color: #666;
        border: 1px solid #eee;
        border-radius: 5px;
        // box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
        background-color: #fff;

        &:hover {
            .card-panel-icon-wrapper {
                color: #fff;
            }

            .icon-blue {
                background: #36a3f7;
            }

            .icon-green {
                background: #34bfa3;
            }

            .icon-red {
                background: #f56c6c;
            }

            .icon-orange {
                background: #e6a23c;
            }
        }

        .icon-blue {
            color: #36a3f7;
        }

        .icon-green {
            color: #34bfa3;
        }

        .icon-red {
            color: #f56c6c;
        }

        .icon-orange {
            color: #e6a23c;
        }

        .card-panel-icon-wrapper {
            float: left;
            margin: 10px;
            padding: 10px;
            transition: all 0.38s ease-out;
            border-radius: 6px;
        }

        .card-panel-icon {
            float: left;
            font-size: 30px;
        }

        .card-panel-description {
            float: right;
            font-weight: bold;
            margin: 15px;
            margin-left: 0px;

            .card-panel-text {
                line-height: 14px;
                color: rgba(0, 0, 0, 0.45);
                font-size: 14px;
                margin-bottom: 12px;
                text-align: right;
            }

            .card-panel-num {
                font-size: 18px;
            }
        }
    }
}
</style>

<style lang="scss" scoped>
.iot-netty-mqtt {
    padding: 20px;
}
</style>
